<!-- 合成藏品列活动列表页 -->
<template>
	<view>
    <navbar></navbar>
		<view class="container">
			<view v-if="0 < list.length" class="goods-list">
				<view class="assets" v-for="item in list" :key="item.goods_id"
					@tap.stop.prevent="onGoodsTaped(item)">
					<view v-if="item.active_status == 1" class="active-status active">已开始</view>
					<view v-else class="active-status">未开始</view>
					<view class="assets__ic">
						<!-- <image src="https://imgcdn.ecbao.cn/nft/assets/assets_icon.png" mode=""></image> -->
					</view>
					<view class="booth-top">
						<image class="goods_img" :src="item.goods_image" mode="aspectFill"></image>
					</view>
					<view class="booth-bottom"></view>
					<view class="assets-info">
						<view class="assets__name col-0 f-36 onelist-hidden--s">{{ item.goods_name }}</view>
						<view class="assets__type m-top20">
							<text v-if="3 == item.goods_type" class="col-f">
							</text>
							<text v-else class="col-f"></text>
						</view>
						<view class="btn-open m-top40 dis-flex flex-center f-26 col-0">
							<text class="col-0">去合成</text>
							<text class="dy-iconfont icon-youjiantou col-0"></text>
						</view>
					</view>
				</view>
				<bottom-safe-area></bottom-safe-area>
			</view>
			<view v-if="!loading && 0 == list.length" class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<view class="cont">暂无活动</view>
			</view>
		</view>
	</view>
</template>

<script>
import navbar from "@/components/navbar/navbar";
	import bottomSafeArea from '@/components/bottom-safe-area/index';
	const app = getApp();
	export default {
		components: {
      navbar,
			bottomSafeArea
		},
		data() {
			return {
				list: [],
				loading: true,
				page: 1,
				hasMore: false,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			app.loginSuccessCallback = () => {
				this.requestData();
			};
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
      this.requestData();
    },
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.setData({
				page: 1
			});
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.hasMore && !this.loading) {
				this.requestData();
			}
		},
		methods: {
			//////// networking ////////
			requestData: function(complete) {
				this.setData({
					loading: true
				});

				app._get(
					'goods/lists', {
						page: this.page,
						collect_type: 2 ,//藏品类型 0:正常藏品 1:盲盒藏品 2:合成藏品
						goods_sku_status:'1,2' //1：未开始 2：进行中 3：已结束
					},
					(res) => {
						if (1 == res.code) {
							let {
								page,
								list,
								hasMore
							} = this;

							if (1 == page) {
								list.length = 0;
							}

							let {
								data,
								total
							} = res.data.list;
							list = [...list, ...data];
							hasMore = total > list.length;

							if (hasMore) {
								page++;
							}
							this.setData({
								page,
								list,
								hasMore
							});
							
						}
					},
					null,
					() => {
						this.setData({
							loading: false
						});

						if (complete) {
							complete();
						}
					}
				);
			},
			onGoodsTaped: function(goods) {
				uni.navigateTo({
					url: `/pages/goods/compose?goods_id=${goods.goods_id}`
				});
			}
		}
	};
</script>
<style>
  page {
    /* background-color: black; */
  }
</style>
<style lang="scss" scoped>
	/* pages/user/assets/index.wxss */
	.goods-list {
		padding: 58rpx 20rpx 0;
	}
	.assets {
		position: relative;
		margin-bottom: 40rpx;
		height: 320rpx;
		// background-color: #c2d0ff;
		background: url('https://img-qn-5.51miz.com/Element/00/64/90/18/bae27b6b_E649018_3371b208.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/260');
		background-size: cover;
		border-radius: 20rpx;
		// -webkit-box-shadow: 0px 0px 8rpx 0 #fff;
		// box-shadow: 0px 0px 8rpx 0 #fff;
		// border-radius: 10rpx;
		// box-sizing: border-box;
	}
	.assets .active-status{
		position: absolute;
		left: -12rpx;
		top:55rpx;
		width: 121rpx;
		height: 55rpx;
		line-height: 54rpx;
		text-align:center;
		font-size: 21rpx;
		color: #fff;
		background: #5c9dff;
		background-size: 100% auto;
    border-top-right-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
    opacity: .8;
	}
	.active-status.active{
		color: $uni-text-color-inverse;
	}

	.assets .assets-info {
		width: 280rpx;
		padding-top: 40rpx;
		position: absolute;
		top: 0;
		right: 50rpx;
		z-index: 3;
	}

	.assets .assets__type {
		font-size: 14rpx;
		white-space: nowrap;
	}

	.assets .assets__no {
		font-size: 24rpx;
		position: relative;
	}

	.assets .assets__no::before,
	.assets .assets__no::after,
	.assets .assets__no text::before,
	.assets .assets__no text::after {
		content: "";
		width: 4rpx;
		height: 4rpx;
		background: $uni-text-color-main-dark;
		border-radius: 50%;
		position: absolute;
		z-index: 2;
	}

	.assets .assets__no::before {
		top: 4rpx;
		left: 4rpx;
	}

	.assets .assets__no::after {
		bottom: 4rpx;
		left: 4rpx;
	}

	.assets .assets__no text::before {
		top: 4rpx;
		right: 4rpx;
	}

	.assets .assets__no text::after {
		bottom: 4rpx;
		right: 4rpx;
	}

	.assets .assets__no text {
		display: inline-block;
		padding: 8rpx 10rpx;
		-webkit-background: $uni-other-color-main-linear;
		background: $uni-other-color-main-linear;
		border-radius: 4rpx;
		position: relative;
	}

	.assets .btn-open {
		width: 140rpx;
		height: 50rpx;
		border-radius: 6rpx;
		box-shadow: 0px 0px 8rpx #527ABE inset;
	}
	.assets .btn-open uni-text{
		color:#888588;
	}

	.assets .booth-bottom {
		width: 650rpx;
		height: 73rpx;
		// 底座
		// background-image: url(https://imgcdn.ecbao.cn/nft/assets/booth_bottom.png);
		background-size: cover;
		background-position: center;
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 1;
	}

	.assets .booth-top {
		width: 320rpx;
		height: 113rpx;
		// 底座
		// background-image: url(https://imgcdn.ecbao.cn/nft/assets/booth_top.png);
		background-size: cover;
		background-position: center;
		position: absolute;
		bottom: -10rpx;
		left: 60rpx;
		z-index: 2;
	}

	.assets .booth-top image {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		left: 50%;
		bottom: 90%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		margin: auto;
	}

	.assets .assets__ic {
		width: 18rpx;
		height: 18rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.assets .assets__ic image {
		width: 100%;
		height: 100%;
	}

	.yoshop-notcont {
		padding-top: 200rpx;
		text-align: center;
	}

	.yoshop-notcont image {
		width: 210rpx;
		height: 145rpx;
	}

	.yoshop-notcont .cont {
		margin-top: 80rpx;
		color: #BCBCBC;
	}
	.goods_img{
		-webkit-box-shadow: 0px 0px 8rpx 0 #527ABE;
		box-shadow: 0px 0px 10rpx 0 #5c9dff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
</style>
